<template>
	<view class="fenleibjs">
		<!-- 头部搜索 -->
		<view class="toubusousuo">
			<view class="sousuobox flexleft" @click="tzsousuo">
				<view class="sousuoicon margin_right2"></view>
				<input class="inputs" type="text" placeholder="请输入你要搜索的内容" :disabled="true">
			</view>
		</view>
		<!-- 内容 -->
		<view class="leftclass_box">
			<!--左边侧边栏 -->
			<view class="leftclass">
				<view :class="index==current?'itemlistfocus':'itemlist'"
					v-for="(item,index) in listclass" :key="item.id" @click="changecurrent(index)">
					<view class="line" v-if="index==current"></view>
					<view :class="index==current?'itenlisttextfocus':'itenlisttext'">{{item.name}}</view>
				</view>
			</view>
			<!-- 右边内容 -->
			<view class="rightcontent ffffff">
				<view class="zwtimg flexcenter" v-if="!listclass[current].childlist.length">
					<image src="../../static/image/system/zwt.png" mode=""></image>
				</view>
				<view class="secondaryclass" v-for="item in listclass[current].childlist" :key="item.id">
					<view class="bigtext margin_top">{{item.name}}</view>
					<view class="flexleft flex_wrap">
						<view class="flexcenter sanshi" v-for="ite in item.childlist" :key="ite.id" @click="tzsplb(1,ite.id)">
							<view class="margin_top">
								<view class="yuanshilt">
									<image :src="ite.image_text" mode=""></image>
								</view>
								<view class="huisetext">{{ite.name}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				current: 0,
				listclass: [{
					"id": 1,
					"pid": 0,
					"name": "母婴",
					"image": "/uploads/20230107/089fed658d35b019f8e6e5c906803c45.png",
					"spacer": "",
					"childlist": [{
						"id": 5,
						"pid": 1,
						"name": "儿童玩具",
						"image": "/uploads/20230107/089fed658d35b019f8e6e5c906803c45.png",
						"spacer": " └",
						"childlist": [{
							"id": 7,
							"pid": 5,
							"name": "遥控玩具",
							"image": "/uploads/20230107/089fed658d35b019f8e6e5c906803c45.png",
							"spacer": "   └",
							"childlist": [],
							"image_text": "/uploads/20230107/089fed658d35b019f8e6e5c906803c45.png"
						}],
						"image_text": "/uploads/20230107/089fed658d35b019f8e6e5c906803c45.png"
					}],
					"image_text": "/uploads/20230107/089fed658d35b019f8e6e5c906803c45.png"
				}]
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init() {
				httpRequest.request('/api/goods/goodsCategory', 'POST', {
					isnav: 0
				}, false, false, true).then(res => {
					this.listclass = res.data
					this.listgoods = res.data[0].childlist
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			changecurrent(index) {
				this.current = index
			},
			// 跳转商品列表
			tzsplb(value,id) {
				let msg = {
					keywords: "",
					category_id: id, //分类id
					type:value//1,普通商品，2福利券商品
				}
				uni.navigateTo({
					url: "/pages/homepage/shangplb?msg=" + encodeURIComponent(JSON.stringify(msg))
				})
			},
			// 跳转搜索页面
			tzsousuo() {
				uni.navigateTo({
					url: '/pages/homepage/sousuo'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.huisetext {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.yuanshilt {
		margin: auto;
		width: 81rpx;
		height: 81rpx;
		border-radius: 50%;

		image {
			margin: auto;
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.sanshi {
		width: 33.33%;
	}
</style>
<style lang="scss" scoped>
	// 侧边栏
	.secondaryclass {
		width: 100%;
		margin-top: 0;
		background-color: #fff;
		border-radius: 10rpx;
		box-sizing: border-box;
	}

	.rightcontent {
		width: 100%;
		/*#ifdef H5*/
		padding: 160rpx 30rpx 30rpx 190rpx;
		/*#endif*/
		/*#ifdef MP-WEIXIN || APP-PLUS*/
		padding: 160rpx 30rpx 30rpx 190rpx;
		/*#endif*/
		box-sizing: border-box;
	}

	// 未选中背景色
	.itemlist {
		padding: 20rpx 16rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		background: #F9F9F8;
	}

	// 选中背景色
	.itemlistfocus {
		padding: 20rpx 16rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		background-color: #ffffff;
	}

	.line {
		width: 10rpx;
		border-radius: 10rpx;
		height: 60rpx;
		background-color: #F78D2B;
	}

	// 未选中
	.itenlisttext {
		margin-left: 20rpx;
		text-align: center;
		font-size: 28rpx;
		color: #333;
		width: 120rpx;
	}

	// 选中
	.itenlisttextfocus {
		margin-left: 10rpx;
		text-align: center;
		font-size: 28rpx;
		color: #F78D2B;
		width: 120rpx;
	}

	.leftclass {
		/*#ifdef H5*/
		top: 240rpx;
		/*#endif*/
		/*#ifdef MP-WEIXIN || APP-PLUS*/
		top: 160rpx;
		/*#endif*/
		position: fixed;
		left: 0;
		height: calc(100vh - 100rpx - 50rpx);
		overflow-y: auto;
		background: #F9F9F8;
	}

	.leftclass_box {
		// min-height: calc(100vh - 100rpx - 214rpx);
		display: flex;
	}

	// 结束
	.toubusousuo {
		/*#ifdef H5*/
		// top: 100rpx;
		/*#endif*/
		/*#ifdef MP-WEIXIN || APP-PLUS*/
		// top: 0rpx;
		/*#endif*/
		position: fixed;
		left: 0;
		padding: 30rpx;
		background-color: #fff;
		box-sizing: border-box;
		z-index: 122;
		width: 100%;
	}


	.sousuobox {
		width: 100%;
		z-index: 122;
		background: #F3F3F3;
		padding: 20rpx 40rpx;
		border-radius: 60rpx;
		box-sizing: border-box;
	}
</style>
